<!--表格组件-分页组件-->
<template>
  <section class="pagination">
    <el-text size="small">
      <template v-if="tableColumns.some((item) => item.type === 'selection')">
        {{ $t('组件文本.已选中') }} {{ selectionList.length }} {{ $t('组件文本.条数据') }}
      </template>
    </el-text>
    <el-pagination
      background
      size="small"
      :total="pageable.total"
      v-model:current-page="pageable.pageNum"
      v-model:page-size="pageable.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      @size-change="
        (val) => {
          emit('sizeChange', val);
        }
      "
      @current-change="
        (val) => {
          emit('currentChange', val);
        }
      "
    />
  </section>
</template>

<script setup>
const props = defineProps({
  //分页
  pagination: {
    type: Object,
    default: () => {
      return {
        pageSize: 10, //每页显示数
        pageNum: 1, //当前页码
        total: 0, //数据总量
        fullData: false, //是否全量数据返回
      };
    },
  },
  //表头
  tableColumns: {
    type: Array,
    default: () => [],
  },
  //复选框选中的数据
  selectionList: {
    type: Array,
    default: () => [],
  },
});
const pageable = computed(() => props.pagination); //分页器

const emit = defineEmits(['sizeChange', 'currentChange']);
</script>

<style scoped lang="less">
.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
</style>
